<template>
  <a-dropdown placement="bottomRight">
    <template #overlay>
      <a-spin :spinning="loading">
        <a-card
          :bordered="false"
          class="ant-card__body-nopadding g-card-bgc"
          style="min-width: 400px"
        >
          <template #title>
            <span style="color: #fff; margin-right: 5px">{{ l('Notification') }}</span>

            <badge :count="unreadNotificationCount" />
          </template>
          <template #extra>
            <svg
              class="icon"
              aria-hidden="true"
              style="margin-right: 8px"
              @click="loadNotifications()"
            >
              <use xlink:href="#gcttongzhi-shuaxin" color="#fff"></use>
            </svg>
            <svg class="icon" aria-hidden="true" color="#fff" @click="chantNotificationSettings()">
              <use xlink:href="#gcttongzhi-shezhi"></use>
            </svg>
          </template>
          <!-- 通知列表 -->
          <div class="notity-list-box">
            <a-row
              v-for="item in notifications"
              @click="gotoUrl(item.url)"
              :key="item.id"
              :gutter="24"
            >
              <a-col :sm="24" style="align-items: center">
                <div class="mb0" style="font-size: 14px; margin: 12px 0">
                  <a-row>
                    <a-col :span="3" style="display: flex; align-items: center">
                      <div class="iconM">
                        <svg class="icon" aria-hidden="true" color="#009EF7">
                          <use xlink:href="#gcttongzhi-xiaoxi"></use>
                        </svg>
                      </div>
                    </a-col>
                    <a-col :span="21" style="align-items: center">
                      <div class="test_box">
                        <a-tooltip :title="item.text">
                          {{ item.text }}
                        </a-tooltip>
                      </div>
                      <div style="font-size: 12px">
                        <span style="color: #999">{{ _momentFromNow(item.time) }}</span>
                        <a
                          @click="setNotificationAsRead(item)"
                          style="float: right; color: #21c890"
                        >
                          {{ l('SetAsRead') }}
                        </a>
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </a-col>
            </a-row>
          </div>

          <!-- 没有数据 -->
          <a-row class="noItem" v-if="!notifications || notifications.length === 0">
            <a-col :span="24" class="pt-md border-top-1 text-center text-grey point">
              <a-empty :description="l('ThereIsNoNotification')" />
            </a-col>
          </a-row>

          <!-- 查看所有通知 -->
          <div class="btn-box">
            <a-row v-if="unreadNotificationCount !== 0">
              <a-col :span="12">
                <div class="default-box">
                  <a-button
                    style="
                      width: 164px;
                      height: 40px;
                      border-radius: 20px;
                      background-color: #f5f6f8;
                    "
                    @click="setAllUserNotificationsAsRead()"
                    type="default"
                    class="lookBtn"
                    >{{ l('SetAllAsRead') }}</a-button
                  >
                </div>
              </a-col>
              <a-col :span="12" class="pt-md border-top-1 text-center text-grey point">
                <a-button
                  type="primary"
                  class="lookBtn"
                  style="width: 100%; height: 40px; border-radius: 20px; color: #fff"
                >
                  <router-link to="/main/notifications-news">
                    {{ l('SeeAllNotifications') }}
                  </router-link>
                </a-button>
              </a-col>
            </a-row>
            <a-row v-if="unreadNotificationCount === 0">
              <p></p>
              <p></p>
              <p></p>
              <div
                style="width: 100%; height: 40px; border-radius: 20px; background-color: #40a9ff"
              >
                <a-col :span="24" class="pt-md border-top-1 text-center text-grey point">
                  <router-link
                    to="/main/notifications-news"
                    style="color: black; text-align: center; line-height: 40px"
                  >
                    {{ l('SeeAllNotifications') }}
                  </router-link>
                </a-col>
              </div>
            </a-row>
          </div>
        </a-card>
      </a-spin>
    </template>
    <badge :dot="unreadNotificationCount !== 0 ? true : false">
      <a-tooltip>
        <template #title>{{ l('Notification') }}</template>
        <svg class="icon icon-header" aria-hidden="true">
          <use xlink:href="#gcttongzhi4"></use>
        </svg>
      </a-tooltip>
    </badge>
  </a-dropdown>
</template>
<script lang="ts">
  import { AppConsts } from '/@/abpPro/AppConsts';
  import { PagedListingComponentBase } from '/@/shared/component-base';
  import { Badge } from 'ant-design-vue';
  import {
    GetUserNotificationsInput,
    NotificationServiceProxy,
    UserNotificationState,
  } from '/@/shared/service-proxies';
  import UserNotificationHelper from '/@/shared/helpers/UserNotificationHelper';
  import HeaderNotificationSettingsComponent from './settings/header-notification-settings.vue';
  import AppAuthService from '/@/shared/abp/app-auth.service';
  import { defineComponent } from 'vue';
  export default defineComponent({
    components: {
      Badge,
    },
    mixins: [PagedListingComponentBase],
    data() {
      return {
        visible: true,
        notifications: [] as any,
        unreadNotificationCount: 0,
        notificationService: new NotificationServiceProxy(),
        userNotificationHelper: UserNotificationHelper,
        UserNotificationState: UserNotificationState,
        _authService: AppAuthService,
      };
    },
    mounted() {
      this.loadNotifications();
      this.registerToEvents();
      this.userNotificationHelper.init();
    },
    methods: {
      /** 登出 */
      logout(): void {
        this._authService.logout();
      },
      loadNotifications() {
        this.loading = true;
        const input = new GetUserNotificationsInput();
        input.state = UserNotificationState.Unread;
        input.maxResultCount = AppConsts.notificationCount;
        input.skipCount = 0;
        this.notificationService
          .getPagedUserNotifications(input)
          .finally(() => {
            this.loading = false;
          })
          .then((result) => {
            this.unreadNotificationCount = result.unreadCount;
            this.notifications = [];
            result.items?.forEach((item) => {
              this.notifications.push(this.userNotificationHelper.format(item as any));
            });
          });
      },
      setAllUserNotificationsAsRead() {
        this.userNotificationHelper.setAllAsRead();
        this.refresh();
      },
      registerToEvents() {
        const _self = this;
        abp.event.on('app.chat.loginMutex', () => {
          this.notify.error(
            this.l('Message.Common.ExitReminder'),
            this.l('Message.Common.AccountOtherLogin'),
          );
          setTimeout(() => {
            _self.logout();
          }, 3000);
        });

        abp.event.on('app.chat.quit', () => {
          this.notify.error(
            this.l('Message.Common.ExitReminder'),
            this.l('Message.Common.AdminQuit'),
          );
          setTimeout(() => {
            _self.logout();
          }, 3000);
        });
        abp.event.on('abp.notifications.received', () => {
          this.loadNotifications();
        });
        abp.event.on('app.notifications.refresh', () => {
          this.loadNotifications();
        });
        abp.event.on('app.notifications.read', () => {
          this.unreadNotificationCount--;
        });
      },
      setAllNotificationsAsRead() {
        this.userNotificationHelper.setAllAsRead();
      },

      chantNotificationSettings() {
        this.modalHelper.create(HeaderNotificationSettingsComponent).subscribe(() => {});
      },

      setNotificationAsRead(userNotification) {
        this.userNotificationHelper.setAsRead(userNotification.userNotificationId);

        setTimeout(() => {
          this.loadNotifications();
        }, 1000);
      },

      gotoUrl(url) {
        if (url) {
          location.href = url;
        }
      },
    },
  });
</script>
<style lang="less" scoped>
  :deep(.ant-badge-dot) {
    top: 16px !important;
    right: 11px !important;
  }
  .mr-sm {
    display: inline-block;
    width: 30px;
    line-height: 30px;
    font-size: 18px;
    text-align: center;
    background-color: #f4f4f4;
    margin-top: -6px;
    color: #666666;
  }
  .mr-sm :hover {
    color: #2482e7;
  }
  :deep(.ant-card-body) {
    width: 400px;
    padding: 0 !important;
    overflow: hidden;
  }
  .mb0 {
    padding: 0 20px;
  }
  .iconM {
    width: 32px;
    height: 32px;
    background: #f7fbfe;
    margin-right: 10px;
    border-radius: 5px;
    opacity: 1;
    color: #6771f8;
    line-height: 32px;
    text-align: center;
  }
  .test_box {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .btn-box {
    padding: 20px;
    border-top: 1px solid #eee;
  }
  :deep(.ant-row) {
    overflow: hidden;
  }
  :deep(.notity-list-box .ant-row:hover) {
    background-color: #f5f5f5;
  }
  :deep(.default-box .ant-btn) {
    border: 1px solid #f5f6f8;
  }
  :deep(.default-box .ant-btn:hover, .ant-btn:focus) {
    border: 1px solid #f5f6f8;
    color: #297cc9;
  }
  :deep(.ant-card-head) {
    background-image: url(/@/assets/images/notify-bg.svg);
    background-size: 100%;
  }
  :deep(.ant-badge-count) {
    min-width: 12px;
    box-shadow: none;
  }
</style>
